<template>
  <div id="info">
    <!-- 导航栏 -->
    <van-nav-bar :title="info.name" left-arrow @click-left="back" @click-right="SearchShow = !SearchShow">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>

    <!-- 轮播图 -->
    <van-swipe v-if="info.thumbs_text" :autoplay="3000">
      <van-swipe-item v-for="(item, key) in info.thumbs_text" :key="key">
        <van-image fit="cover" :src="item" />
      </van-swipe-item>
    </van-swipe>

    <div class="detailbox">
      <h4>{{ info.name }}</h4>
      <div class="price">
        <em>￥</em>{{ info.price }}<font>库存{{ info.stock }}件</font>
      </div>
    </div>

    <!-- 产品参数和评价 -->
    <div class="detailbox_2">
      <van-tabs v-model:active="active" type="card" color="#ee0a24">
        <van-tab title="产品参数">
          <p v-html="info.content"></p>
        </van-tab>
        <van-tab title="商品评价">
          <van-field v-if="list != null" name="rate" label="评分：">
            <template #input>
              <van-rate v-model="list.rate" readonly />
            </template>
          </van-field>

          <van-grid style="display: flex;">
            <van-image round width="3rem" height="3rem" :src="info.thumbs_text" :label="info.id" />

            <van-grid style="display: flex;">
              <van-text-ellipsis :content="list.comment" expand-text="展开" collapse-text="收起" />
              <van-image :name="list.comment" width="80" height="80" :src="info.thumbs_text" />              
              <van-image :name="list.comment" width="80" height="80" :src="info.thumbs_text" />              
              <van-image :name="list.comment" width="80" height="80" :src="info.thumbs_text" />              
            </van-grid>
            
          </van-grid>
<van-text-ellipsis :content="list.updatetime" height="100%"/>


        </van-tab>
      </van-tabs>
    </div>

    <!-- 底部操作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" @click="client" />
      <van-action-bar-icon icon="cart-o" text="购物车" :badge="count" @click="toPages" />
      <van-action-bar-button type="warning" text="加入购物车" @click="AddCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="onSubmit" />
    </van-action-bar>

    <!-- 分享面板 -->
    <van-share-sheet v-model:show="SearchShow" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const back = () => proxy.$router.go(-1);

let cartid = proxy.$route.query.hasOwnProperty("cartid") ? proxy.$route.query.cartid : 12;
cartid = ref(cartid);

let proid = proxy.$route.query.hasOwnProperty("proid") ? proxy.$route.query.proid : 0;
proid = ref(proid);

let business = proxy.$cookies.get("business")
  ? proxy.$cookies.get("business")
  : { id: 0 };
business = reactive(business);

const SearchShow = ref(false);
const count = ref("");
const options = [
  [
    { name: "微信", icon: "wechat" },
    { name: "朋友圈", icon: "wechat-moments" },
    { name: "微博", icon: "weibo" },
    { name: "QQ", icon: "qq" },
  ],
  [
    { name: "复制链接", icon: "link" },
    { name: "分享海报", icon: "poster" },
    { name: "二维码", icon: "qrcode" },
    { name: "小程序码", icon: "weapp-qrcode" },
  ],
];

const onSelect = (option) => {
  //   showToast(option.name);
  SearchShow.value = false;
};
// 产品详情对象
const info = ref({});
//产品评价
const list = ref();

onBeforeMount(() => {
  getInfoData();
});

//获取商品信息
const getInfoData = async () => {
  let result = await proxy.$POST({
    url: "/index/info",
    params: {
      proid: proid.value,
    },
  });

  if (result.code == 1) {
    info.value = result.data.info;
    list.value = result.data.list;
  }

  let result1 = await proxy.$POST({
    url: "/cart/index",
    params: {
      cartids: cartid.value,
    },
  });
  if (result1.code == 1) {
    list.value = result1.data;
  }

  let res = await proxy.$POST({
    url: "/index/count",
    params: {
      busid: business.id,
    },
  });
  if (res.code == 1) {
    count.value = res.data;
  }
};

//添加至购物车
const AddCart = async () => {
  if (business.id == 0) {
    proxy.$fail({
      message: "未登陆，请先去登陆",
      duration: 1000,
      onClose: () => {
        proxy.$router.push("/business/login");
        return false;
      },
    });
  }

  let result = await proxy.$POST({
    url: "/cart/add",
    params: {
      proid: proid.value,
      busid: business.id,
    },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  } else {
    getInfoData();
    proxy
      .$confirm({
        message: "添加成功，是否需要跳转到购物车",
      })
      .then(() => {
        toPages()
        return false;
      })
      .catch(() => { });
  }
};

// console.log(proxy.$route.query);

//立即购买 --> 进入生成商品订单页面
const onSubmit = async () => {

  //判断商品情况
  let result = await proxy.$POST({
    url: "/confirm/info",
    params: {
      busid: business.id,
      proid: proid.value,
    },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }

  //请求数据 --> 渲染页面
  proxy.$router.push({
    path: "/product/confirminfo",
    query: { proid: proid.value },
  });

}

//前往购物车
const toPages = () => {
  proxy.$router.push("/product/cart");
}

//客服
const client = () => {
  proxy.$router.push("/product/client");
}
</script>
<style>
#info .van-share-sheet__options {
  justify-content: center;
}

#info .van-tabs__nav--card {
  margin: 0;
}

#info .van-swipe-item {
  width: 100%;
  height: 240px;
}

#info .van-image {
  width: 100%;
  height: 100%;
}
</style>
